<template>
  <div class="goods_list">
    <MyTable :list="list">
      <template #header>
         <th>序号</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body=scoped>
        <td>{{scoped.index + 1}}</td>
        <td>{{scoped.row.goods_name}}</td>
        <td>{{scoped.row.goods_price}}</td>
        <td>
          <span class="beg"
          v-for="(item,idx) in scoped.row.tags" 
          :key="idx">
          {{item}}
          </span>
        </td>
        <td><button @click="del(scoped.row.id)" class="btn btn-danger btn-sm">删除</button></td>
      </template>
    </MyTable>

       
  </div>
</template>

<script>

// 目标1:渲染数据
// 1.1封装MyTable组件
// 1.2在MyGoodsList中获取数据,存放在data并传入Table
// 1.3在MyTable中循环渲染数据
// 目标2使用插槽封装MyTable
// 2.1使用slot占位(th和td都需要设置slot)
// 2.2给slot添加一个name属性
// 2.3给tbody里面的slot绑定数据
// 2.4使用表格,用具名插槽替换表头和表体,使用作用域插槽接收表体数据并渲染
// 目标:3渲染标签
// 1.1使用soan标签结合v-for渲染tags
// 目标:4删除数据
// 4.1给删除按钮绑定点击事件(事件处理函数定义在当前组件)
// 4.2传入id给事件处理函数
// 根据id找到索引,去数组中删除对应的数据

import MyTable from '../components/MyTable.vue'
export default {
  data() {
    return {
      list:[]
    }
  },
  methods:{
    del(id){
     const idx = this.list.findIndex(item=>item.id === id)
     this.list.splice(idx,1)
    }
  },
  components: { MyTable },
 async created(){
 const res =  await this.$axios.get('api/goods')
  console.log(res);
  this.list = res.data.data
  }
}
</script>

<style>
.goods_list{
  padding-top: 45px;
}
.beg{
  display: inline-block;
  background-color: #ffc308;
  margin-left: 5px;
  border-radius: 5px;
  
}
</style>